{% extends "dvaui/base.html" %}
{% load staticfiles %}

{% block page_content %}
<section class="content-header" style="padding-top:0px" xmlns="http://www.w3.org/1999/html">
<div class="row">
    <div class="box box-info">
        <div class="box-header">
            <h4> <span style="font-weight:bold">{{ object.name }}</span>: Currently showing frames and associated annotations & detections for frame index <span style="font-weight:bold">{{ offset }}</span> to <span style="font-weight:bold">{{ limit }}</span>.</h4>
            <div class="col-lg-12 m-t">
                <table class="table table-bordered">
                <thead>
                <tr>
                    <th class="text-center">type</th>
                    <th class="text-center">duration</th>
                    <th class="text-center">frames</th>
                    <th class="text-center">segments</th>
                    <th class="text-center">regions</th>
                    <th class="text-center">labels</th>
                    <th class="text-center">height</th>
                    <th class="text-center">width</th>
                    <th class="text-center">created</th>
                    <th class="text-center">URL</th>

                </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{%  if object.dataset and object.query %} Query {% elif object.stream %} Stream {% elif object.dataset %} Dataset {% else %}Video {% endif %}</td>
                        <td class="text-right">{{ object.length_in_seconds }} </td>
                        <td class="text-right">{{ object.frames }} </td>
                        <td class="text-right">{{ object.segments }} </td>
                        <td class="text-right">{{ region_count }} </td>
                        <td class="text-right">{{ label_count }} </td>
                        <td class="text-right">{{ object.height }} </td>
                        <td class="text-right">{{ object.width }} </td>
                        <td class="text-center">{{ object.created }}</td>
                        <td class="text-center">{% if object.url %}<a href="{{ object.url }}" target="_blank">{{ object.url }}</a>{% endif %}</td>
                    </tr>
                </tbody>
                </table>
        </div>
        </div>
        </div>
    </div>
</section>
<section class="content">
<div class="row">
    <div class="col-lg-6">
        {% if not video.dataset %}
        <div class="box">
        <div class="box-header with-border" >
            <h3>Video</h3>
            {%  if object.url %}<a href="{{ object.url }}" target="_blank">{{ object.url }}</a>{% endif %}
        </div>
        <div class="box-body" style="text-align:center">
            {% if not video.stream %}
                <video class="video-js" controls="" preload="metadata" id="media" data-setup='{"fluid": true}'
                       style="width:90%;margin-left:auto;margin-right:auto">
                    <source src="{{url}}" type="video/mp4">
                </video>
            {% else %}
                <h4>The video is a livestream. Please select segment below</h4>
            {% endif %}
                <table class="table dataTables">
                <thead>
                <tr>
                    <th class="text-center">Segment index</th>
                    <th class="text-center">start frame index</th>
                    <th class="text-center">start_time</th>
                    <th class="text-center">end_time</th>
                    <th class="text-center">frames</th>
                    <th class="text-center">view</th>
                </tr>
                </thead>
                <tbody>
                {% for f in segments %}
                    <tr>
                        <td class="text-right">{{ f.segment_index }} </td>
                        <td class="text-right">{{ f.start_index }} </td>
                        <td class="text-right">{{ f.start_time }} </td>
                        <td class="text-right">{{ f.end_time }} </td>
                        <td class="text-right">{{ f.frame_count }} </td>
                        <td class="text-center"><a href="/segments/{{ f.pk }}">view</a></td>
                    </tr>
                {% endfor %}
                </tbody>
                </table>
        </div>
        </div>
        {% endif %}
        {% if frame_index_offsets %}
        <div class="box box-warning">
        <div class="box-header with-border">
        <h4>The video / dataset has max frame_index {{ max_frame_index }} > 1000 please select range </h4>
        </div>
        <div class="box-body">
            <table class="table dataTables">
            <thead>
            <tr>
                    <th class="text-center">frame index range</th>
                    <th class="text-center">view</th>
            </tr>
            </thead>
            <tbody>
            {% for offset in frame_index_offsets %}
                <tr>
                    <td class="text-center">{{ offset.0 }} to {{ offset.1 }}</td>
                    <td class="text-center"><a href=".?frame_index_offset={{ offset.0 }}">view range</a></td>
                </tr>
            {% endfor %}
            </tbody>
            </table>
        </div>
        </div>
        {%  endif %}
    </div>

<div class="col-lg-6">
    <div class="box " >
        <div class="box-header with-border"><h3 style="display: inline-block">Task status</h3>
        <a class="btn btn-primary pull-right" href="#tasks" style="margin: 10px auto" > <i class="fa fa-list"></i> All tasks</a>
        </div>
        <div class="box-body">
            <div class="row text-center">
                    <div class="col-xs-3">
                        <a class="btn btn-warning btn-block" href="{% url 'video_tasks_status' object.pk 'pending' %}" style="margin: 10px auto" > <i class="fa fa-clock-o"></i> {{ pending_tasks }} pending</a>
                    </div>
                    <div class="col-xs-3">
                        <a class="btn btn-primary btn-block" href="{% url 'video_tasks_status' object.pk 'running' %}" style="margin: 10px auto" > <i class="fa fa-gears"></i> {{ running_tasks }} running</a>
                    </div>
                    <div class="col-xs-3">
                        <a class="btn btn-success btn-block" href="{% url 'video_tasks_status' object.pk 'successful' %}" style="margin: 10px auto" > <i class="fa fa-check"></i> {{ successful_tasks }} done</a>
                    </div>
                    <div class="col-xs-3">
                        <a class="btn btn-danger btn-block" href="{% url 'video_tasks_status' object.pk 'failed' %}" style="margin: 10px auto" > <i class="fa fa-close"></i> {{ errored_tasks }} failed</a>
                    </div>
            </div>
        </div>
    </div>
    <div class="box ">
        <div class="box-body">
            <div class="row m-t" style="margin-top:25px">
                <div class="col-sm-3 text-center">
                    <form action="/export_video" method="post"><input type="hidden" value="{{ object.pk }}" name="video_id"><input type="hidden" value="file" name="export_method">{% csrf_token %}
                        <button type="submit" class="btn btn-info btn-block" style="margin-top:20px" ><i class="fa fa-download"></i> Export to file</button>
                    </form>
                </div>
                <div class="col-sm-3 text-center">
                    <form action="/delete_video" method="post"><input type="hidden" value="{{ object.pk }}" name="video_id">{% csrf_token %}
                        <button type="submit" class="btn btn-danger btn-block" style="margin-top:20px" ><i class="fa fa-delete"></i> Delete</button>
                    </form>
                </div>
                <form action="/export_video" method="post">
                <div class="col-sm-3"><div class="form-group"><label for="bucket"> S3/GS/DO Path <input name="path" type="text" placeholder="s3://test/temp.dva_export" required="required" class="form-control" /></label></div></div>
                <div class="col-sm-3">{% csrf_token %}
                    <input type="hidden" value="{{ object.pk }}" name="video_id">
                    <input type="hidden" value="s3" name="export_method">
                    <button type="submit" class="btn btn-block btn-primary" style="margin-top:20px"> <i class="fa fa-cloud-upload"></i> Backup to S3</button>
                </div>
                </form>
            </div>
            <h5 class="text-center">Delete currently requires retrieval workers to be restarted to purge index loaded in memory (a fix is pending)</h5>
            </div>
        </div>
            <div class="box">
            <div class="box-body">
                <h3>Metadata</h3>
                <textarea style="width:100%;height:150px;">{{ object.metadata }}</textarea>
            </div>
            </div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
            <div class="box">
            <div class="box-header with-border">
            <h3>List of frames from {{ offset }} to {{ limit }}</h3>
            </div>
            <div class="box-body">
                {% if frame_first and frame_last %}
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-6 text-center" style="height:200px"><a href="/frames/{{ frame_first.pk }}"><img style="height:70%"  src="{{ MEDIA_URL }}{{ object.pk }}/frames/{{ frame_first.frame_index }}.jpg"><h4>Frame {{ frame_first.frame_index }}</h4></a></div>
                    <div class="col-lg-6 col-md-6 col-sm-6 text-center" style="height:200px"><a href="/frames/{{ frame_last.pk }}"><img style="height:70%" src="{{ MEDIA_URL }}{{ object.pk }}/frames/{{ frame_last.frame_index }}.jpg"><h4>Frame {{ frame_last.frame_index }}</h4></a></div>
                </div>
                {% endif %}
                <table class="table dataTables">
                <thead>
                <tr>
                        <th class="text-center">type</th>
                        <th class="text-center">name</th>
                        <th class="text-center">size in pixels</th>
                        <th class="text-center">x</th>
                        <th class="text-center">y</th>
                        <th class="text-center">w</th>
                        <th class="text-center">h</th>
                        {% if not object.dataset %}<th class="text-center">segment</th>{% endif %}
                        <th class="text-center">frame index</th>
                        <th class="text-center">view</th>
                </tr>
                </thead>
                <tbody>
                {% for f in frame_list %}
                    <tr>
                        <td>{% if object.dataset %} image {% else %} video frame {% endif %}</td>
                        <td class="text-left">{% if object.dataset %}  {{ f.name }} {% endif %}</td>
                        <td class="text-right">{% widthratio object.height 1 object.width %}</td>
                        <td class="text-right">{{ 0 }}</td>
                        <td class="text-right">{{ 0 }}</td>
                        <td class="text-right">{{ f.w }}</td>
                        <td class="text-right">{{ f.h }}</td>
                        {% if not object.dataset %}<td class="text-right"><a href="/segments/by_index/{{ object.pk }}/{{ f.segment_index }}">{{ f.segment_index }}</a></td>{% endif %}
                        <td class="text-right">{{ f.frame_index }} </td>
                        <td class="text-center"><a href="/frames/{{ f.pk }}">view</a></td>
                    </tr>
                {% endfor %}
                </tbody>
                </table>
                </div>
            </div>
    </div>
</div>
<div class="row">
    <div id="tasks" class="col-lg-12">
        <div class="box">
            <div class="box-header with-border">
                <h3>Tasks</h3>
            </div>
            <div class="box-body">
                <form method="post">
                {% csrf_token %}
                <table class="table dataTables">
                    <thead>
                    <tr>
                        <th class="text-center">Process / Group</th>
                        <th class="text-center">Operation</th>
                        <th class="text-center">Model</th>
                        <th class="text-center">Objects</th>
                        <th class="text-center">min frame index</th>
                        <th class="text-center">max frame index</th>
                        <th class="text-center">created</th>
                        <th class="text-center">status & view details</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for e in task_list %}
                        <tr>
                            <td><a href="/process/{{ e.parent_process_id }}">{{ e.parent_process_id }}</a> / {{ e.task_group_id }}</td>
                            <td>{{ e.operation }}</td>
                            <td>{{ e.arguments.trainedmodel_selector }}</td>
                            <td  class="text-right">{{ e.results.created_objects }}</td>
                            <td class="text-right">{{ e.min_frame_index }}</td>
                            <td class="text-right">{{ e.max_frame_index }}</td>
                            <td class="text-center">{{ e.created|timesince}}</td>
                            <td>
                                {% if e.errored %}
                                    <a href="/task_detail/{{ e.pk }}" class="btn btn-danger btn-block">{% if e.imported %}Imported{% endif %} Failed</a>
                                {% elif e.duration < 0 and not e.started %}
                                    <a href="/task_detail/{{ e.pk }}" class="btn btn-warning btn-block">{% if e.imported %}Imported{% endif %} Pending</a>
                                {% elif e.duration < 0 and e.started and not e.completed%}
                                    <a href="/task_detail/{{ e.pk }}" class="btn btn-primary btn-block">{% if e.imported %}Imported{% endif %} Running</a>
                                {% elif e.completed%}
                                    <a href="/task_detail/{{ e.pk }}" class="btn btn-success btn-block">{% if e.imported %}Imported{% endif %} Completed</a>
                                {% else %}
                                    <a href="/task_detail/{{ e.pk }}" class="btn btn-info btn-block">Unknown</a>
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
                </form>
            </div>
        </div>
    </div>
</div>
</section>
{% endblock %}
{% block page_js%}
<script>
    $(document).ready(function() {
        InitializeTables();
    })
</script>
{% endblock %}
